<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>

    <link rel="stylesheet" th:href="@{/layui/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layui/css/layuimini.css?v=2.0.4.2}" media="all">
    <link rel="stylesheet" th:href="@{/layui/css/themes/default.css}" media="all">
    <link rel="stylesheet" th:href="@{/layui/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <link rel="stylesheet" th:href="@{/layui/css/public.css}" media="all">

    <style>
        .div-content{
            /*height: 200px;*/
            background-color: white;
            border-radius: 15px;
            padding: 15px;
        }
        .table-search-feldset{
            margin: 0;
            border: 1px solid #e6e6e6;
            padding: 10px 20px 5px 20px;
            color: #6b6b6b;
        }
    </style>
</head>
<body>
    <div class="div-content">
        <form class="layui-form layui-form-pane" id="form-search" action="">
        <fieldset class="table-search-feldset">
            <legend>搜索条件</legend>
            <div class="layui-form-item">

                <div class="layui-inline">
                    <label class="layui-form-label">员工姓名</label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="realname" autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">生日</label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="startDate" placeholder="开始日期" autocomplete="off" class="layui-input date">
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input type="text" name="endDate" placeholder="结束日期" autocomplete="off" class="layui-input date2">
                    </div>
                </div>

                <div class="layui-inline">
                    <button id="btn-search" lay-submit lay-filter="btn-search-filter" class="layui-btn layui-btn-radius layui-btn-normal ">
                        <i class="layui-icon">&#xe615;</i>
                        搜索
                    </button>

                    <button id="btn-reset" type="reset" class="layui-btn layui-btn-radius layui-btn-normal ">
                        <i class="layui-icon">&#xe639;</i>
                        清空条件
                    </button>
                </div>
            </div>
        </fieldset>
            <table id="table-emp" lay-filter="table-emp-filter">

            </table>
        </form>

    </div>
    <!--处理性别数据-->
    <script type="text/html" id="ConvertSex">
        {{#
        if(d.sex == 'm' | d.sex == 1){
        return '男';
        }else if(d.sex == 'f' | d.sex == 2){
        return '女';
        }else{
        return 'null';
        }
        }}
    </script>
    <!--字段转换-->
    <script type="text/html" id="ConvertDept">
        {{#
        return d.dept.deptName;
        }}
    </script>

    <!--列表头部工具集-->
    <script type="text/html" id="table-emp-toolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
            <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
            <button class="layui-btn layui-btn-sm" lay-event="update">修改</button>
        </div>
    </script>
    <script type="text/html" id="col-emp-toolbar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>



    <script th:src="@{/layui/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
    <script th:src="@{/layui/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
    <script th:inline="javascript">

        // 定义函数刷新表格
        function refreshTable(){
            // $("#form-search").reset();
            $("#btn-reset").click();
            $("#btn-search").click();
        }


        var ctxPath = [[@{/}]];
        /*日期控件*/
        // 导入laydate，利用laydate对象，执行render的实例
        layui.use(['laydate','table','form'], function(){
            var laydate = layui.laydate;
            var table = layui.table;
            var form = layui.form;

            /**数据表格，列表头部工具栏监听*/
            table.on('toolbar(table-emp-filter)',function (obj) {
                if(obj.event === 'add'){
                    top.layer.open({
                        title: '添加用户',
                        type: 2,
                        shade: 0.2,
                        maxmin:true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: ctxPath + 'emp/add/ui'
                    });
/*                    $(window).on("resize", function () {
                        layer.full(index);
                    });*/


                }else if (obj.event == 'delete'){
                    var checkStatus = table.checkStatus('table-emp');  //idTest即为基础参数id对应的值
                    console.log(checkStatus.data)   // 获取选中行的数据
                    // 如果没有选中任何数据
                    if(checkStatus.data.length == 0) {
                        top.layer.alert('没有选中任何数据', {icon:2, anim:6, title:"警告"});
                        return false;
                    }

                    // 拿到选定的id
                    var idArr = new Array();
                    $(checkStatus.data).each(function () {
                        idArr.push(this.empId);
                    })
                    console.log(idArr);


                    top.layer.confirm('确认要删除吗？', {icon: 3, title:'删除'},function (index) {
                        // do something
                        // 发送异步请求删除数据，结果提示，刷新表格
                        let url = ctxPath + "emp/" + idArr.join(",");
                        var params = {
                            _method:"DELETE"
                        }
                        $.post(url,params,function (response) {
                            if(response.code == 200){
                                top.layer.msg(response.message,{icon: 1});
                                refreshTable();
                                layer.close(index);
                                console.log(index);
                                layer.msg("删除成功",{icon:1});
                            }else{
                                top.layer.alert(response.message,{icon: 1,anim: 6});
                                layer.close(index);
                                console.log(index);
                                layer.msg("删除失败",{icon:5});
                            }
                        });
                        layer.close(index);
                    });


                }else if (obj.event == 'update'){
                    alert('update');
                }
            });

            //执行一个laydate实例,日期控件
            laydate.render({
                elem: '.date' //指定元素
            });
            laydate.render({
                elem: '.date2' //指定元素
            });


            /*数据表格
            员工列表表格渲染*/
            var table = layui.table;
            //第一个实例
            table.render({
                elem: '#table-emp'
                ,height: 315
                ,url: ctxPath + 'emp/list' //数据接口
                ,page: true //开启分页
                ,toolbar: "#table-emp-toolbar"
                ,limits: [5,10,15,20]
                ,cols: [[ //表头
                    // 复选框
                    {type: "checkbox",width:60},
                    {field: 'empId', title: '员工编号', width:120, sort: true}
                    ,{field: 'realname', title: '姓名', width:140}
                    ,{field: 'sex', title: '性别', width:80, sort: true, templet: '#ConvertSex'}
                    ,{field: 'age', title: '年龄', width:80}
                    ,{field: 'money', title: '工资', width: 140}
                    ,{field: 'dept', title: '部门', width: 140, sort: true, align: 'center', templet: "#ConvertDept"}
                    ,{field: 'birthday', title: '生日', width: 120, sort: true}
                    ,{field: 'address', title: '家庭地址'}
                    ,{title: '操作', width: 150, toolbar: '#col-emp-toolbar'}
                ]]
            });

            // 监听表单提交
            var form = layui.form;
            form.on('submit(btn-search-filter)', function(data){
                console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                // 刷新表格
                table.reload('table-emp', {
                    where: { //设定异步数据接口的额外参数，任意设
                        realname: data.field.realname,
                        startDate: data.field.startDate,
                        endDate: data.field.endDate
                    }
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

            // 监听操作列
            table.on('tool(table-emp-filter)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象

                if(layEvent === 'del'){ //查看
                    //do somehing
                    top.layer.confirm('确认要删除吗?', {icon: 3, title:'删除'},function (index) {
                        // do something
                        // 发送异步请求删除数据，结果提示，刷新表格
                        let url = ctxPath + "emp/" + data.empId;
                        var params = {
                            _method:"DELETE"
                        }
                        $.post(url,params,function (response) {
                            if(response.code == 0){
                                top.layer.msg(response.message,{icon: 1});
                                refreshTable();
                            }else{
                                top.layer.alert(response.message,{icon: 1,anim: 6});
                            }
                        });
                        layer.close(index);
                    });
                }else if(layEvent === 'edit') {
                    layer.open({
                        type: 2,
                        title: "修改员工",
                        shadeClose: false,
                        area: ['70%', '70%'],
                        content: ctxPath + 'emp/' + data.empId
                    });
                }
            });
        });
    </script>


</body>
</html>